<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>登录</title>
    <link rel="stylesheet" type="text/css" href="../../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../../css/common.css" />
    <link rel="stylesheet" type="text/css" href="../../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../../css/aui-pull-refresh.css" />
    <link rel="stylesheet" type="text/css" href="../../../css/swiper.min.css" />
    <link rel="stylesheet" type="text/css" href="../../../css/style.css" />
    <style>
        .header {
            width: 100%;
            height: 17.55rem;
            float: left;
            background: url(../../../image/login/bg1.png);
            background-size: 100% 100%;
            box-sizing: border-box;
            padding: 2.4rem 0.85rem 0 0.85rem;
            position: relative;
        }

        .register {
            float: right;
            height: 4.5rem;
            line-height: 4.5rem;
            text-align: right;
            width: 100%;
            letter-spacing: 0.04rem;
            color: #ffffff;
            font-size: 1.8rem;
        }

        .login_title {
            width: 100%;
            height: 2.8rem;
            font-size: 2.8rem;
            line-height: 2.8rem;
            letter-spacing: 0.06rem;
            color: #ffffff;
            text-align: center;
            position: relative;
            float: left;
        }

        .login_title_shadow {
            width: 100%;
            height: 1.1rem;
            overflow: hidden;
            position: absolute;
            transform: rotateX(120deg);
            color: #fff;
            opacity: 0.41;
            top: 2.4rem;
        }

        .logo {
            float: left;
            width: 7.8rem;
            height: 6.8rem;
            /*background-color: #ffffff;*/
            border-radius: 1.9rem;
            margin: auto;
            position: absolute;
            left: 0;
            right: 0;
            bottom: -3.6rem;
        }

        .logo img {
            width: 100%;
            height: 100%;
        }

        .content {
            width: 100%;
            float: left;
            margin: 9.85rem 0 0 0;
            box-sizing: border-box;
            padding: 0 3.9rem;
        }

        .content_list {
            width: 100%;
            height: 5.45rem;
            border-bottom: 0.1rem solid #ececec;
            position: relative;
        }

        .content_list_ipt {
            width: 100%!important;
            height: 100%!important;
            font-size: 1.6rem!important;
            padding: 0.9rem 1.5rem 0 3.15rem!important;
            box-sizing: border-box;
            line-height: 8rem;
        }

        .user_icon {
            width: 1.3rem;
            height: 1.5rem;
            position: absolute;
            top: 2.35rem;
        }

        .password_icon {
            width: 1.3rem;
            height: 1.5rem;
            position: absolute;
            top: 2.35rem;
        }

        .look_icon {
            width: 1.2rem;
            height: 0.7rem;
            position: absolute;
            top: 2.8rem;
            right: 0;
        }

        .login_btn {
            width: 100%;
            margin: 6.55rem 0 0 0;
            height: 4.5rem;
            background-image: linear-gradient(90deg, #ff9457 0%, #ffa36f 44%, #ff7878 100%), linear-gradient( #ed6a20, #ed6a20);
            background-blend-mode: normal, normal;
            border-radius: 2.25rem;
            float: left;
            font-size: 1.6rem;
            letter-spacing: 0.03rem;
            color: #ffffff;
            line-height: 4.5rem;
            text-align: center;
        }

        .forget {
            width: 100%;
            text-align: right;
            height: 1.3rem;
            font-size: 1.3rem;
            letter-spacing: 0.03rem;
            color: #5d5d5d;
            line-height: 1.3rem;
            margin: 1.5rem 0 3.75rem 0;
            float: left;
        }

        .other_line {
            width: 100%;
            height: 0.1rem;
            background-color: #ececec;
            float: left;
            position: relative;
        }

        .other_line_title {
            display: inline-block;
            margin: auto;
            background: #f2f2f2;
            width: 8.5rem;
            left: 0;
            right: 0;
            position: absolute;
            font-size: 1.3rem;
            color: #a3a3a3;
            text-align: center;
            top: -0.9rem;
        }

        .other_login_box {
            width: 100%;
            height: 2.7rem;
            float: left;
            margin: 3.8rem 0 0 0;
            display: flex;
        }

        .other_login_icon {
            height: 100%;
            width: 100%;
        }

        .other_login_icon .wx {
            width: 2.85rem;
            height: 100%;
            margin: auto;
        }

        .other_login_icon .qq {
            width: 2.3rem;
            height: 100%;
            margin: auto;
        }

        .aui-toast .aui-toast-content {
            color: #fff
        }
    </style>
</head>

<body>
    <div id="app">
        <header class="header">

            <div class="register" @click="open_register(0)">
                注册
            </div>
            <div class="login_title">
                登录
                <div class="login_title_shadow">
                    登录
                </div>
            </div>
            <div class="logo">
                <img src="../../../image/login/icon.png" alt="">
            </div>
        </header>
        <div class="content">
            <div class="content_list">
                <img src="../../../image/login/icon3.png" alt="" class="user_icon">
                <input type="text" name="" value="" class="content_list_ipt" placeholder="请输入手机号" ref="phone">
            </div>
            <div class="content_list">
                <img src="../../../image/login/icon4.png" alt="" class="password_icon">
                <img :src="password_type=='password'?'../../../image/login/icon7.png':'../../../image/login/icon2.png'" alt="" class="look_icon" @click="change_look()">
                <input :type="password_type" name="" :value="pass" class="content_list_ipt" placeholder="请输入密码" ref="password" ref="password">
            </div>
            <div class="login_btn" @click="login">
                登录
            </div>
            <div class="forget" @click="open_register(1)">
                忘记密码？
            </div>
            <div class="other_line">
                <div class="other_line_title">
                    其它登录方式
                </div>
                <div class="other_login_box">
                    <div class="other_login_icon">
                        <img src="../../../image/login/icon5.png" class="wx" alt="" onclick="wx_login()">
                    </div>
                    <div class="other_login_icon">
                        <img src="../../../image/login/icon6.png" class="qq" alt="" onclick="qq_login()">
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>
<script type="text/javascript" src="../../../script/api.js"></script>
<script type="text/javascript" src="../../../script/axios.min.js"></script>
<script type="text/javascript" src="../../../script/axios-config.js"></script>
<script type="text/javascript" src="../../../script/zepto.js"></script>
<script type="text/javascript" src="../../../script/vue.min.js"></script>
<script type="text/javascript" src="../../../script/swiper.min.js"></script>
<script type="text/javascript" src="../../../script/utils.js"></script>
<script type="text/javascript" src="../../../script/base64.js"></script>
<script type="text/javascript" src="../../../script/common.js"></script>
<script type="text/javascript" src="../../../script/aui-tab.js"></script>
<script type="text/javascript" src="../../../script/aui-toast.js"></script>
<script type="text/javascript" src="../../../script/aui-scroll.js"></script>
<script type="text/javascript" src="../../../script/aui-pull-refresh.js"></script>
<script type="text/javascript">
    apiready = function() {
        //setRefresh()

    }

    var toast = new auiToast({})
    var other = Base64.encode("UNOun0HACHA");
    var vue = new Vue({
            el: "#app",
            data: {
                password_type: "password",
                pass: "",
            },
            methods: {
                //登录
                login: function() {
                    var data = {};
                    data["telephone"] = this.$refs.phone.value;
                    data["password"] = this.$refs.password.value;
                    data["chat_id"] = "";
                    data = verification(data)
                    if (data.code == 0) {
                        toast.fail({
                            title: data.data,
                            duration: 1000
                        });
                        // console.log(data);
                    } else if (data.code == 1) {
                        Axios.post(window.Url.login, data.data).then(function(res) {
                            console.log(JSON.stringify(res))
                            if (res.status == 1) {
                                var token = res.token
                                $api.setStorage('token', token);
                                // var url = api.pageParam.url
                                // var name = api.pageParam.name
                                toast.success({
                                    title: res.info,
                                    duration: 1000
                                });
                                api.sendEvent({
                                    name: 'token',
                                    extra: {
                                        token: token,
                                    }
                                });
                                setTimeout(function() {
                                    api.closeWin({});
                                }, 1000);
                            } else {
                                toast.fail({
                                    title: res.info,
                                    duration: 2000
                                });
                            }
                        });
                    }
                },
                //密码可视化
                change_look: function() {
                    var password_type = this.password_type
                        // console.log(password_type)
                    password_type == "password" ? password_type = "text" : password_type = "password";
                    var val = this.$refs.password.value
                    this.password_type = password_type
                    this.pass = val
                },
                //跳转注册
                open_register: function(e) {
                    api.openWin({
                        name: 'user_register',
                        url: './register.html',
                        pageParam: {
                            type: e
                        }
                    });
                }
            },
        })
        //刷新
    function setRefresh() {
        var pullRefresh = new auiPullToRefresh({
            container: document.querySelector('.aui-refresh-content'),
            triggerDistance: 100
        }, function(ret) {
            if (ret.status == "success") {
                setTimeout(function() {
                    pullRefresh.cancelLoading(); //刷新成功后调用此方法隐藏
                }, 1500)
            }
        })
    }

    function verification(data) {
        for (let a in data) {
            switch (a) {
                case "telephone": //手机号验证
                    let phone = data[a]
                    if (!phone) {
                        let status = {
                            code: 0,
                            data: "账号不能为空"
                        }
                        return status
                    }
                    break;
                case "password": //密码验证
                    let password = data[a]
                    if (!password) {
                        let status = {
                            code: 0,
                            data: "密码不能为空"
                        }
                        return status
                    }
                    break;
                default:
            }
        }
        let status = {
            code: 1,
            data: data
        }
        return status
    }  //表单验证  //表单验证
    function wx_login() {  //微信登录
        var wx = api.require('wx');
        var code = '';
        wx.isInstalled(function(ret, err) {  //判断是否安装微信
            if (ret.installed) {
                wx.auth({
                    apiKey: ''
                }, function(ret, err) {
                    if (ret.status) {
                        // console.log(JSON.stringify(ret));
                        wx.getToken({   //gettoken   //微信获取token
                            apiKey: '',
                            apiSecret: '',
                            code: ret.code
                        }, function(ret, err) {
                            if (ret.status) {
                                // console.log(JSON.stringify(ret));
                                wx.getUserInfo({   //getuserinfo  微信调取用户信息接口
                                    accessToken: ret.accessToken,
                                    openId: ret.openId
                                }, function(ret, err) {
                                    if (ret.status) {    //授权成功后
                                        console.log(JSON.stringify(ret));
                                        console.log("授权成功")
                                        var data = {}
                                        data["unionid"] = ret.openid
                                        data["imgurl"] = ret.headimgurl
                                        data["type"] = 1
                                        data["nickname"] = ret.nickname
                                        api.openWin({
                                            name: 'binding_phone',
                                            url: './code_phone.html',
                                            pageParam: {
                                                data:data
                                            }
                                        });

                                    } else {
                                        alert(err.code);
                                    }
                                });
                            } else {
                                alert(err.code);
                            }
                        });
                    } else {
                        alert(err.code);
                    }
                });
            } else {
                alert('当前设备未安装微信客户端');
            }
        });
    }
    function qq_login(){  //qq登录
        var qq = api.require('QQPlus');
        qq.installed(function(ret, err) {
            if (ret.status) {
                qq.login({
                    apiKey:"",
                },function(ret, err) {
                    // api.alert({
                    //     title: 'id和token',
                    //     msg: ret.openId + ret.accessToken
                    // });
                    var openid = ret.openId
                    console.log(JSON.stringify(ret))
                    qq.getUserInfo(function(ret, err) {
                        if (ret.status) {
                            var user_info = JSON.parse(ret.info)
                            var data = {}
                            data["unionid"] = openid
                            data["imgurl"] = user_info.figureurl_qq_2
                            data["type"] = 2
                            data["nickname"] = ret.nickname
                            api.openWin({
                                name: 'binding_phone',
                                url: './code_phone.html',
                                pageParam: {
                                    data:data
                                }
                            });
                            // api.alert({ msg: JSON.stringify(ret) });
                        } else {
                            api.alert({ msg: err.msg });
                        }
                    });
                });
                // api.alert({ msg: "安装" });
            } else {
                api.alert({ msg: "没有安装" });
            }
        });
    }
</script>
